<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      list-style: none;
      border: 0;
    }
    body{
      background: url(images/1.jpg) no-repeat;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #000;
      margin: 100px auto;
      position: relative;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      background: url(images/4.jpg);
      overflow: hidden;
      float: left;
      background: pink;
      font-size: 100px;
      text-align: center;
      line-height: 200px;
      font-weight: bold;
      color: #000;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 180px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
      color: #000;
      border-radius: 50%;
    }
    .all ol li.current{
      background: red;
    }
  </style>
</head>
<body>
  <div class="all" id="all">
    <div class="screen">
      <ul id="ul">
        <li>I</li>
        <li>LOVE</li>
        <li>YOU</li>
        <li>SO</li>
        <li>MUTCH</li>
      </ul>
    </div>
  </div>
  <script>
  var num = 0;
  function changebg(){
    var img = ["url(images/1.jpg)","url(images/22.jpg)","url(images/33.jpg)"];
    document.body.style.background = img[num];
    if(num == img.length-1){
      num = 0;
    }else{
      num++;
    }

  }
  setInterval(changebg,1000);
  
  //创建动画函数
  function animate(obj,target){
    clearInterval(obj.timer);
    var speed = obj.offsetLeft<target ? 15 : -15;
    obj.timer = setInterval(function(){
      var result = target-obj.offsetLeft;
      obj.style.left = obj.offsetLeft+speed+"px";
      if(Math.abs(result)<=15){
        clearInterval(obj.timer);
        obj.style.left = target+"px";
      }
    },10)
  }
  //生成下面的数字部分
  var box =document.getElementById('all');
  var ul = document.getElementById('ul');
  var ullis = ul.children;
  ul.appendChild(ul.children[0].cloneNode(true));
  var ol = document.createElement("ol");
  box.appendChild(ol);
  for(var i = 0;i<ullis.length-1;i++){
    var li = document.createElement('li');
    li.innerHTML= i+1;
    ol.appendChild(li);
  }
  ol.children[0].className = "current";
  //开始动画部分
  var ollis = ol.children;
  for(var i = 0;i<ollis.length;i++){
    ollis[i].index = i;
    ollis[i].onmouseover = function(){
      for(var j = 0;j<ollis.length;j++){
        ollis[j].className = "";
      }
      this.className = "current";
      animate(ul,-this.index*500);
      square = key = this.index;
    }
  }
  //以上是给不同的ol里面的li添加鼠标事件
  //开始动画部分
  var timer = null;
  var key = 0;
  var square = 0;
  timer = setInterval(autoplay,1000);
  function autoplay(){
    key++;
    if(key>ullis.length - 1){
      ul.style.left = 0;
      key = 1;
    }
    animate(ul,-key*500);
    square++;
    if(square>ollis.length-1){
      square = 0;
    }
    for(var i = 0;i<ollis.length;i++){
      ollis[i].className = "";
    }
    ollis[square].className = "current";
  }
  box.onmouseover = function(){
    clearInterval(timer);
  }
  box.onmouseout = function(){
    timer = setInterval(autoplay,1000);
  }
  </script>
</body>
</html>
